<template>

<div>
<nav>
  <ul>
  <li><router-link tag="div" :to="'/index.html'" class="nav-a">首页</router-link></li>
  </ul>
</nav>
<div class="main">

<!-- <h2>id：{{$route.params.id}} </h2> -->
<ul class="breadcrumb">
  <li><router-link tag="div" :to="'/index.html'" class="breadcrumb-a">首页</router-link></li>
  <li><router-link tag="div" :to="post.categoryId" class="breadcrumb-a"> {{post.categoryName}}</router-link> </li>
  <li>文章页</li>
</ul>

<h4 class="title">{{post.title}}</h4>
<div class="time">
  {{post.createdAt}}
</div>
<div class="content">
      <mavon-editor
        class="md"
        :value="mdContent"
        :subfield="false"
        :default-open="'preview'"
        :toolbars-flag="false"
        :editable="false"
        :scroll-style="true"
        :ishljs="true"
      />

</div>

</div>

</div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
  name: 'Detail',
  components: {
    mavonEditor
  },
  data () {
    return {
      id: 0,
      mdContent: '',
      post: [
      ]
    }
  },

  created: function () {
    // this.$data.id = 100
    // const that = this
    this.id = this.$route.params.id
    //  const id = this.$data.id

    // // 调用时使用
    //  async Upload() {
    //   let { result } = await getlist ();
    //     console.log(result)
    //  },

    // console.log(that.$data.id)

    this.$axios({
      url: 'https://api.renrenlol.com/api.v1/admin/article/' + this.id,
      method: 'get',
      headers: {
        'User-Token': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2Mzg3Nzk3NTEsInVpZCI6IjEifQ.75yWHKdfffKweDVIP9KojnfRVqBxx7tErucw-0r09pY'
      }
    }).then(response => {
      this.post = response.data.data
      this.mdContent = this.post.content
    })
  },
  destroyed: function () {
    console.group('destroyed 销毁完成状态===============》')
    // console.log('%c%s', 'color:red', 'el      : ' + this.$el)
    // console.log(this.$el)
    // console.log('%c%s', 'color:red', 'data    : ' + this.$data)
    // console.log('%c%s', 'color:red', 'message: ' + this.message)
  },

  methods: {

  }
}
</script>

<style scoped>
.main{
  width:1200px;
  margin:0 auto;
  background: #ffffff;
}
.main .title{padding:20px;text-align: center;}

.main .time{padding:20px;text-align: right;}

.content{margin-top: 20px;}

/* .body {
  height:100%;
  background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
} */

nav {
  max-width: 960px;
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  padding: 60px 0;
}

nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

nav ul li {
  display: inline-block;
}

nav ul li .nav-a {
  padding: 18px;
  font-family: "Open Sans";
  text-transform:uppercase;
  color: rgba(0, 35, 122, 0.5);
  font-size: 18px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

nav ul li .nav-a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 35, 122, 0.7);
}

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    font-size: 17px;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li .breadcrumb-a {
    color: #0275d8;
    text-decoration: none;
}
ul.breadcrumb li .breadcrumb-a:hover {
    color: #01447e;
    text-decoration: underline;
}
</style>
